<template>
  <view>
    <hx-navbar ref="hxnb" :config="config"></hx-navbar>
    <view class="main">
      <u--form
          labelPosition="top"
          :model="model"
          ref="uForm"
      >
        <u-form-item
            label="姓名"
            prop="name"
            borderBottom
            required
        >
          <u--input
              v-model="model.name"
              border="none"
              placeholder="请输入姓名"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="编号"
            prop="code"
            borderBottom
            required
        >
          <u--input
              v-model="model.code"
              border="none"
              placeholder="请输入编号"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="布匹"
            prop="typeName"
            borderBottom
            required
        >
          <view @click="typeNamePage">
            <text class="input-text">{{ model.typeName || '请选择布匹' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="欠款"
            prop="originDebt"
            borderBottom
            required
        >
          <u--input
              v-model="model.originDebt"
              type="number"
              border="none"
              placeholder="请输入欠款"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="信用额度"
            prop="creditAmount"
            borderBottom
            required
            labelWidth="70"
        >
          <u--input
              v-model="model.creditAmount"
              type="number"
              border="none"
              placeholder="请输入信用额度"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="业务员"
            prop="employeeName"
            borderBottom
            required
            labelWidth="60"
        >
          <view @click="employeeNamePage">
            <text class="input-text">{{ model.employeeName || '请选择业务员' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="分类"
            prop="catName"
            borderBottom
            required
        >
          <view @click="catNamePage">
            <text class="input-text">{{ model.catName || '请选择分类' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="门店"
            prop="shopName"
            borderBottom
            required
        >
          <view @click="shopNamePage">
            <text class="input-text">{{ model.shopName || '请选择门店' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="结款方式"
            prop="settlementTypeName"
            borderBottom
            required
            labelWidth="70"
        >
          <view @click="settlementTypeNamePage">
            <text class="input-text">{{ model.settlementTypeName || '请选择结款方式' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="价格模式"
            prop="priceModelName"
            borderBottom
            required
            labelWidth="70"
        >
          <view @click="priceModelNamePage">
            <text class="input-text">{{ model.priceModelName || '请选择价格模式' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="组织性质"
            prop="orgTypeName"
            borderBottom
            required
            labelWidth="70"
        >
          <view @click="orgTypeNamePage">
            <text class="input-text">{{ model.orgTypeName || '请选择组织性质' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="标签"
            prop="labels"
            borderBottom
            required
            labelWidth="40"
        >
          <view @click="labelsPage">
            <text class="input-text">{{ model.labels.length ? model.labels.map(item => item.label).join(', ') : '请选择标签' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="做货类型"
            prop="goodsTypeName"
            borderBottom
            required
            labelWidth="70"
        >
          <view @click="goodsTypeNamePage">
            <text class="input-text">{{ model.goodsTypeName || '请选择做货类型' }}</text>
          </view>
        </u-form-item>
        <u-form-item
            label="是否开票"
            prop="isInvoice"
            borderBottom
            required
            labelWidth="70"
        >
          <u-switch v-model="model.isInvoice"></u-switch>
        </u-form-item>
        <u-form-item
            label="是否开启"
            prop="isEnable"
            borderBottom
            required
            labelWidth="70"
        >
          <u-switch v-model="model.isEnable"></u-switch>
        </u-form-item>
        <u-form-item
            label="备注"
            prop="remarks"
            borderBottom
            labelWidth="70"
        >
          <u--textarea v-model="model.remarks" placeholder="请输入备注" count ></u--textarea>
        </u-form-item>

        <u-button
            type="primary"
            text="提交"
            customStyle="margin-top: 10px"
            @click="submit"
        ></u-button>
        <u-button
            type="error"
            text="重置"
            customStyle="margin-top: 10px"
            @click="reset"
        ></u-button>
      </u--form>
    </view>

    <u-popup :show="catNameShow" mode="bottom" overlayOpacity="0.3" @close="catNameShow = false">
      <view class="popup-bottom-view">
        <scroll-view :scroll-y="true" style="height: 700rpx">
          <view class="p-20" v-for="(item, index) in cxTreeList" :key="index">
            <cxTreeListItem
                :paramData="item"
                layer="0"
                @clickItem="catNameClose"
            ></cxTreeListItem>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import cxTreeListItem from "@/components/cx-tree-list-item/cx-tree-list-item.vue";
  import {getCategoryList} from "@/apis/bill/information/product";
  import {arrayToTree} from "@/utils/util";
  import {addData} from "@/apis/bill/information/custom";

  const initModel = {
    name: '',
    code: '',
    type: '',
    typeName: '',
    originDebt: '',
    creditAmount: '',
    employeeId: '',
    employeeName: '',
    catId: '',
    catName: '',
    shopName: '',
    shopId: '',
    settlementTypeName: '',
    settlementTypeId: '',
    priceModelName: '',
    priceModelId: '',
    orgType: '',
    orgTypeName: '',
    labels: [],
    goodsTypeName: '',
    goodsTypeId: '',
    isInvoice: true,
    isEnable: true,
    remarks: '',
  }

  export default {
    name: 'customer-order-add',
    onLoad() {
      uni.$on('on-selected-piece-goods-type', item => {
        this.model.type = item.value
        this.model.typeName = item.label
      })
      uni.$on('on-selected-salesman', item => {
        this.model.employeeId = item.id
        this.model.employeeName = item.realName
      })
      uni.$on('on-selected-shop', item => {
        this.model.shopName = item.label
        this.model.shopId = item.value
      })
      uni.$on('on-selected-settlement-type', item => {
        this.model.settlementTypeName = item.label
        this.model.settlementTypeId = item.value
      })
      uni.$on('on-selected-priceModel', item => {
        this.model.priceModelName = item.label
        this.model.priceModelId = item.value
      })
      uni.$on('on-selected-orgType', item => {
        this.model.orgType = item.value
        this.model.orgTypeName = item.label
      })
      uni.$on('on-selected-label-for-customer', data => {
        this.model.labels = data
      })
      uni.$on('on-selected-goods-type', item => {
        this.model.goodsTypeId = item.value
        this.model.goodsTypeName = item.label
      })

      this.initData()
    },
    components: {
      cxTreeListItem
    },
    data() {
      return {
        config: {
          title: "添加客户",
          color: "#ffffff",
          backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        },
        model: {...initModel},

        catNameShow: false,
        cxTreeList: []
      }
    },
    methods: {
      typeNamePage() {
        this.$Router.push({
          name: "SelectPieceGoodsType"
        })
      },
      employeeNamePage() {
        this.$Router.push({
          name: "SelectSalesman"
        })
      },
      catNamePage() {
        this.catNameShow = true
      },
      catNameClose(item) {
        this.model.catName = item.name
        this.model.catId = item.id
        this.catNameShow = false
      },
      shopNamePage() {
        this.$Router.push({
          name: "SelectShop"
        })
      },
      settlementTypeNamePage() {
        this.$Router.push({
          name: "SelectSettlementType"
        })
      },
      priceModelNamePage() {
        this.$Router.push({
          name: "SelectPriceModel"
        })
      },
      orgTypeNamePage() {
        this.$Router.push({
          name: "SelectOrgType"
        })
      },
      labelsPage() {
        this.$Router.push({
          name: "SelectLabelForCustomer",
        })
      },
      goodsTypeNamePage() {
        this.$Router.push({
          name: "SelectGoodsType",
        })
      },
      initData() {
        getCategoryList().then((res) => {
          if (!res.flag) return;
          const data = res.data || {};
          this.cxTreeList = []
          this.cxTreeList = arrayToTree(data, {
            isAddIcon: false,
            isDelectIcon: false
          });
        });
      },
      async submit() {
        const { name, code, type, originDebt, creditAmount, employeeId, catId, shopId, settlementTypeId, priceModelId, orgType, labels, goodsTypeId, isEnable, isInvoice, remarks } = this.model
        if (!name) return this.$refs.uToast.show({
          type: 'default',
          message: '请输入姓名',
        })
        if (!code) return this.$refs.uToast.show({
          type: 'default',
          message: '请输入编号',
        })
        if (!type) return this.$refs.uToast.show({
          type: 'default',
          message: '请选择布匹',
        })
        if (!originDebt) return this.$refs.uToast.show({
          type: 'default',
          message: '请输入信用欠款',
        })
        if (!creditAmount) return this.$refs.uToast.show({
          type: 'default',
          message: '请输入信用额度',
        })
        if (!employeeId) return this.$refs.uToast.show({
          type: 'default',
          message: '请选择业务员',
        })
        if (!catId) return this.$refs.uToast.show({
          type: 'default',
          message: '请选择分类',
        })
        if (!shopId) return this.$refs.uToast.show({
          type: 'default',
          message: '请选择门店',
        })
        if (!settlementTypeId) return this.$refs.uToast.show({
          type: 'default',
          message: '请选择结款方式',
        })
        if (!priceModelId) return this.$refs.uToast.show({
          type: 'default',
          message: '请选择价格模式',
        })
        if (!orgType) return this.$refs.uToast.show({
          type: 'default',
          message: '请选择组织性质',
        })
        if (!labels.length) return this.$refs.uToast.show({
          type: 'default',
          message: '请选择标签',
        })
        if (!goodsTypeId) return this.$refs.uToast.show({
          type: 'default',
          message: '请选择货物类型',
        })

        const { code: rCode, title } = await addData({
          ...this.model,
          labels: labels.map(item => item.value)
        })

        this.$refs.uToast.show({
          type: 'default',
          message: title,
        })

        if (rCode === 200) {
          setTimeout(() => {
            this.$router.back()
            this.reset()
          }, 300)
        }
      },
      reset() {
        this.model = {...initModel}
      }
    }
  }
</script>

<style scoped lang="scss">
  .main {
    padding: 10rpx 30rpx;
    padding-bottom: 40rpx;
    background-color: #fff;

    .input-text {
      color: #b3b3b3;
    }
  }

  .popup-bottom-view {
    padding: 20upx 10upx;
  }
</style>
